<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
	<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

	<meta name="description" content=" This is a flat, in-the-page calendar. This calendar displays six months, three months in each row. The control month is set to the second month, which contains selected date on initialization of the page. The default date, all the standard controls for next month, next year, etc. are based on the control month. The title changes based on the control month (titleHtml option). ">
	<meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools">
	<title>Zapatec DHTML Calendar Widget - Six Month Calendar</title>

	<!-- Common JS files -->
	<script type='text/javascript' src='../../../zapatec/utils/zapatec.js'></script>

	<!-- Custom includes -->	
		<!-- import the calendar script -->
		<script type="text/javascript" src="../../../zapatec/zpcal/src/calendar.js"></script>

		<!-- import the language module -->
		<script type="text/javascript" src="../../../zapatec/zpcal/lang/calendar-en.js"></script>

		<!-- other languages might be available in the lang directory; please check
		your distribution archive. -->


	<!-- ALL demos need these css -->
	<link href="../../../zapatec/website/css/zpcal.css" rel="stylesheet" type="text/css">
	<link href="../../../zapatec/website/css/template.css" rel="stylesheet" type="text/css">
	<style type="text/css">
		body {
			width: 778px;
		}
	</style>

	<!-- Theme css -->
	<link href="../../../zapatec/zpcal/themes/bluexp.css" rel="stylesheet" type="text/css">

	<link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico">
	


</head>
<body>	<div class='zpCalSubHeader' style='text-align:center;'>Six Month Calendar</div>

		<div class='zpCalDemoText'>
		<ul>
		<li>This demo uses the <b>bluexp theme</b>.</li>
		
		<li>This is a flat, in-the-page calendar.</li>
		<li>This calendar displays six months, three months in each row.</li>
		<li>The control month is set to the second month, which contains selected date on initialization of the page. The default date, all
		the standard controls for next month, next year, etc. are based on the control month.
		<li>The title changes based on the control month (titleHtml option).</li>

		</ul>
		</div>



<br/>
<br/>
<br/>
	<div style="float: left; margin-left: 1em; margin-bottom: 1em;"
		id="calendar-container">

		<div style='text-align:center; font-weight:bold' id="preview"> Click a date.</div>
		<br/>
	</div>
<script type="text/javascript">
	<!--  to hide script contents from old browsers
	function dateChanged(calendar) {
		var preview = document.getElementById("preview");
		if (preview) {
			preview.innerHTML = calendar.currentDate.print('%a, %b %d, %Y');
		}
	}

	// end hiding contents from old browsers  -->
</script>

		<script type="text/javascript">
		var cal = new Zapatec.Calendar.setup({
		
		flat         : "calendar-container", // ID of the parent element
		flatCallback : dateChanged,          // our callback function
		numberMonths   :     6,
		controlMonth   :     2,
		monthsInRow    :     3,
		titleHtml     : function(strTitle, month, year) {
			return "Control Month is " +  Zapatec.Calendar.i18n(month, "mn")
			},
		showsTime      :     false      //don't show time, only date

		});
		
	</script>


	<noscript>
		<br/>
		This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'>
		AJAX Component</a> - Zapatec DHTML Calendar Widget, but your browser does not support Javascript.
		<br/>
		<br/>
	</noscript>      
		<br/><br/><br/>
		<div class="footer" style='width: 778px; text-align:center; margin-top:2em'>
		&copy; 2004-2007 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong>
		</div>
</body>
</html>
